<template>
  <div id="pdfBox"  class="h-100 pdf-box overflow-y flex-1" ref="pdfBox"></div>
</template>

<script setup>
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';

import { ref, reactive, computed, watch, onBeforeUnmount, onMounted, onUnmounted, nextTick, inject } from 'vue';
import { getDict } from '@/api/common.js';

const { VITE_APP_BASE_API, VITE_APP_ENV, VITE_APP_BASE_URL } = import.meta.env;

const props = defineProps({
  src: {
    type: String,
    default: ''
  }
});
const $emit = defineEmits(['onPdfLoaded']);
const PDF = ref(null);
const pdfBox = ref(null);
watch(
  () => props.src,
  src => {
    console.log(src);
    if (src) {
      nextTick(() => {
        setTimeout(() => {
          initPdf();
        },0)

      });
    }
  },
  {
    immediate: false, //立即监听--进入就会执行一次 监听显影状态
    flush: 'post'
  }
);

function initPdf() {
  const pdfurl = VITE_APP_ENV === 'development' ? VITE_APP_BASE_API + props.src : VITE_APP_BASE_URL + props.src;
  console.log(pdfurl)
  console.log(pdfBox.value)
  console.log(document.querySelector('#pdfBox'));
  PDF.value = new Pdfh5('#pdfBox', {
    pdfurl,
  });

  PDF.value.on('complete', (status, msg, time) => {
    $emit('onPdfLoaded');
    console.log('状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒');
  });
}

onUnmounted(() => {
  // console.log('likai');
});

// https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf
</script>

<style lang="scss" scoped>
::v-deep {
  .pdfjs .pdfViewer {
    padding: 0 8px 8px 8px;
  }
}
</style>
